<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap组件（11.30）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            margin-top: 100px;
        }
        body{
            /* background-color:yellow; */
        }
    </style>
</head>
<body>
    
    <div class="container">
        <h2>巨幕</h2>
        <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>

        <h2>警告框</h2>
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>
        <div class="alert alert-secondary" role="alert">
            A simple secondary alert—check it out!
        </div>
        <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
        </div>
        <div class="alert alert-danger" role="alert">
            A simple danger alert—check it out!
        </div>
        <div class="alert alert-warning" role="alert">
            A simple warning alert—check it out!
        </div>
        <div class="alert alert-info" role="alert">
            A simple info alert—check it out!
        </div>
        <div class="alert alert-light" role="alert">
            A simple light alert—check it out!
        </div>
        <div class="alert alert-dark" role="alert">
            A simple dark alert—check it out!
        </div>

        <h2>警告框</h2>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>


        <h2>进度条</h2>
        <div class="progress">
            <!-- progress-bar-striped条纹 -->
            <!-- progress-bar-animated带动画的进度条 -->
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated"  style="width:50%">50%</div>
            <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"  style="width:30%">30%</div>
            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"  style="width:20%">20%</div>
        </div>


        

        <h2>徽章</h2>
        <!-- <h1>Example heading <span class="badge badge-secondary">New</span></h1>
        <h2>Example heading <span class="badge badge-secondary">New</span></h2> -->
        <h3>Example heading <span class="badge badge-secondary">New</span></h3>
        <h4>Example heading <span class="badge badge-secondary">New</span></h4>
        <h5>Example heading <span class="badge badge-secondary">New</span></h5>
        <h6>Example heading <span class="badge badge-secondary">New</span></h6>

        <span class="badge badge-primary">Primary</span>
        <span class="badge badge-secondary">Secondary</span>
        <span class="badge badge-success">Success</span>
        <span class="badge badge-danger">Danger</span>
        <span class="badge badge-warning">Warning</span>
        <span class="badge badge-info">Info</span>
        <span class="badge badge-light">Light</span>
        <span class="badge badge-dark">Dark</span>


        <h2>普通导航</h2>
            <!--  flex-column 垂直导航 -->
        <!-- <ul class="nav flex-column"> -->
            <!-- justify-content-end右对齐 -->
        <!-- <ul class="nav justify-content-end"> -->
            <!-- justify-content-center居中对齐 -->
        <!-- <ul class="nav justify-content-center "> -->
            <!-- nav-tabs选项卡式导航 -->
        <!-- <ul class="nav justify-content-center nav-tabs"> -->
            <!-- nav-pills胶囊式导航 -->
        <!-- <ul class="nav justify-content-center nav-pills"> -->
            <!-- nav-justified和容器一样宽 -->
        <ul class="nav justify-content-center nav-pills nav-justified">
            <li class="nav-item">
                <a href="#" class="nav-link active" >淘宝</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled" >京东</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" >闲鱼</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" >苏宁</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" >当当</a>
            </li>
        </ul>

        <h2>导航栏</h2>
        <!-- navbar-expand-lg响应式的 -->
        <!-- bg-dark背景色  bg-light-->
        <!-- navbar-dark主题 -->
        <!-- <nav class="navbar navbar-expand-lg bg-dark navbar-dark" > -->
            <!-- 垂直方向显示 navbar  bg-dark navbar-dark -->
        <nav class="navbar  bg-dark navbar-dark" >
            <!-- 颜色层次不同 -->
            <!-- navbar-brand高亮 -->
            <a href="#" class="navbar-brand">
                Logo
                <img style="width:100px;height: 100px;" src="img/img2.jpg">
            </a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link active" >淘宝</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link disabled" >京东</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >闲鱼</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >苏宁</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" >当当</a>
                </li>
            </ul>
        </nav>

        <h2>导航栏上表单与按钮</h2>
        <form class="form-inline">
            <input type="text" class="form-control">
            <button class="btn btn-success">登录</button>
            <button class="btn btn-success">注册</button>
        </form>

        <h2>折叠导航栏固定在顶部</h2>
        <!-- navbar-expand-lg响应式的 -->
        <!-- bg-dark背景色  bg-light-->
        <!-- navbar-dark主题 -->
        <!-- <nav class="navbar navbar-expand-lg bg-dark navbar-dark" > -->
            <!-- 垂直方向显示 navbar  bg-dark navbar-dark -->
            <!-- fixed-top固定在顶部 -->
            <!-- fixed-bottom固定在底部 -->
        <nav class="navbar  navbar-expand-mg bg-dark navbar-dark  fixed-top" >
            <!-- 颜色层次不同 -->
            <!-- navbar-brand高亮 -->
            <a href="#" class="navbar-brand">
                Logo
                <!-- <img style="width:100px;height: 100px;" src="img/img2.jpg"> -->
            </a>
            <!-- 定义折叠按钮 -->
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapse">
                <!-- navbar-toggle-icon导航切换图标 -->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 导航内容先放在一个div里边 -->
            <!-- 导航折叠div -->
            <div id="myCollapse" class="collapse navbar-collapse ">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link active" >淘宝</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link disabled" >京东</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >闲鱼</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >苏宁</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >当当</a>
                    </li>
                </ul>
                <!-- 导航栏上表单与按钮 -->
                <form class="form-inline">
                    <input type="text" class="form-control">
                    <button class="btn btn-success">取消</button>
                </form>
                <!-- 这是普照文本 -->
                <span class="navbar-text">这是普照文本</span>
            </div>
        </nav>


        <h2>折叠导航栏</h2>
        <!-- navbar-expand-lg响应式的 -->
        <!-- bg-dark背景色  bg-light-->
        <!-- navbar-dark主题 -->
        <!-- <nav class="navbar navbar-expand-lg bg-dark navbar-dark" > -->
            <!-- 垂直方向显示 navbar  bg-dark navbar-dark -->
            <!-- fixed-top固定在顶部 -->
            <!-- fixed-bottom固定在底部 -->
        <nav class="navbar  navbar-expand-mg bg-dark navbar-dark " >
            <!-- 颜色层次不同 -->
            <!-- navbar-brand高亮 -->
            <a href="#" class="navbar-brand">
                Logo
                <!-- <img style="width:100px;height: 100px;" src="img/img2.jpg"> -->
            </a>
            <!-- 定义折叠按钮 -->
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapse">
                <!-- navbar-toggle-icon导航切换图标 -->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 导航内容先放在一个div里边 -->
            <!-- 导航折叠div -->
            <div id="myCollapse" class="collapse navbar-collapse ">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link active" >淘宝</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link disabled" >京东</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >闲鱼</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >苏宁</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" >当当</a>
                    </li>
                </ul>
                <!-- 导航栏上表单与按钮 -->
                <form class="form-inline">
                    <input type="text" class="form-control">
                    <button class="btn btn-success">取消</button>
                </form>
                <!-- 这是普照文本 -->
                <span class="navbar-text">这是普照文本</span>
            </div>
        </nav>



        <h2>分裂式按钮</h2>
        <div class="btn-group ">
            <button type="button" class="btn btn-primary">登录</button>
            <!-- 按钮组普通按钮带下拉 -->
            <div class="btn-group">
                <!-- btn-secondary 灰色 -->
                <!-- dropdown-toggle 下拉切换 -->
                <!-- data-toggle="dropdown" -->
                <button  class="btn btn-primary">选择网站</button>
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <!-- <button  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button> -->
                <!-- 展开之后的div -->
                
                <div class="dropdown-menu  dropdown-menu-right">
                    <h5 class="dropdown-header">标题</h5>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <!-- disabled禁用 -->
                    <a href="#" class="dropdown-item disabled">百度</a>
                </div>
                
            </div>
            <input class="btn btn-primary" type="button" value="取消">
            <button type="button" class="btn btn-primary" disabled="disabled">设置</button>
        </div>

        <h2>输入框组带下拉菜单按钮</h2>
        <div class="input-group mt-3" >
            <div class="input-group-prepend">
                <!-- btn-secondary 灰色 -->
                <!-- dropdown-toggle 下拉切换 -->
                <!-- data-toggle="dropdown" -->
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
                <!-- 展开之后的div -->
                <div class="dropdown-menu dropdown-menu-left">
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                    <a href="#" class="dropdown-item">百度</a>
                </div>
                
            </div>
            <input type="text" class="form-control">
        </div>

        <h2>下拉菜单</h2>
        <form>
            <div class="form-group">
                <label for="city">选择你喜欢的城市</label>
                <select class="form-control" id="city" name="city" >
                    <option value="">广元</option>
                    <option value="">成都</option>
                    <option value="">泸州</option>
                    <option value="">巴中</option>
                    <option value="">乐山</option>
                    <option value="">绵阳</option>
                </select>
            </div>

        </form>

        <h2>下拉菜单</h2>
            <div class="dropdown">
                <!-- btn-secondary 灰色 -->
                <!-- dropdown-toggle 下拉切换 -->
                <!-- data-toggle="dropdown" -->
                <button  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
                <!-- 展开之后的div -->
                <div class="dropdown-menu  dropdown-menu-right">
                    <h5 class="dropdown-header">标题</h5>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <!-- disabled禁用 -->
                    <a href="#" class="dropdown-item disabled">百度</a>
                </div>
                
            </div>
            
        <h2>按钮组垂直方向</h2>
        <!-- btn-group-vertical垂直方向 -->
        <!-- btn-group水平方向 -->
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">登录</button>
            <input class="btn btn-primary" type="button" value="取消">
            <button type="button" class="btn btn-primary" disabled="disabled">设置</button>
        </div>
        <h2>按钮组水平方向</h2>
        <div class="btn-group btn-group-sm mt-3">
            <button type="button" class="btn btn-primary">登录</button>
            <input class="btn btn-primary" type="button" value="取消">
            <button type="button" class="btn btn-primary" disabled="disabled">设置</button>
        </div>
        <h2>按钮组水平方向（按钮组普通按钮带下拉）</h2>
        <div class="btn-group btn-group-lg mt-3">
            <button type="button" class="btn btn-primary">登录</button>
            <!-- 按钮组普通按钮带下拉 -->
            <div class="btn-group">
                <!-- btn-secondary 灰色 -->
                <!-- dropdown-toggle 下拉切换 -->
                <!-- data-toggle="dropdown" -->
                <!-- <button  class="btn btn-primary" data-toggle="dropdown">选择网站</button> -->
                <button  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
                <!-- 展开之后的div -->
                <!-- <span class="caret"></span> -->
                <div class="dropdown-menu  dropdown-menu-right">
                    <h5 class="dropdown-header">标题</h5>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <!-- 分割线 -->
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">百度</a>
                    <div class="dropdown-divider"></div>
                    <!-- disabled禁用 -->
                    <a href="#" class="dropdown-item disabled">百度</a>
                </div>
                
            </div>
            <input class="btn btn-primary" type="button" value="取消">
            <button type="button" class="btn btn-primary" disabled="disabled">设置</button>
        </div>
        <h2>分页</h2>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>


        
    </div>
</body>
</html>